<template>
  <div id="drawProcessDesign">
    <a-button @click="getData">提交</a-button>
    <a-button @click="nodeChange">修改当前node</a-button>
    <FactoryDrawFlow @clickNode="clickNode"
                     ref="flow"
                     :FlowConfig="FlowConfig"></FactoryDrawFlow>
  </div>
</template>

<script>
import { list_data } from '../assets/info'

export default {
  name: 'Home',

  data() {
    return {
      node: null,
      FlowConfig: [
        {
          id: 'root',
          groupId: null,
          type: '1',
          title: 'title',
          content: '请选择',
          isRow: true,
          isRoot: true,
          data: {},
        },
      ],
    }
  },

  mounted() {
    this.init()
  },
  methods: {
    getData() {
      // console.log(this.$refs.flow)
      let res = this.$refs.flow.getResData()
      // console.log('这是返回的一维数组', res)
    },
    nodeChange() {
      this.node.content = 'nihao'
      // console.log(this.node)
      this.$refs.flow.nodeChange(this.node)
    },
    /**
     * 1、创建一个row length 1
     * 2、创建一个col节点
     * 3、创建一组col length 1
     * return [{pid id type}]
     */
    getNodeArr() {
      this.FlowConfig = this.$refs.flow.getNodeArr()
      return this.FlowConfig
    },
    init() {
      setTimeout(() => {
        this.FlowConfig = list_data
        this.$forceUpdate()
      }, 1000)
      // this.FlowConfig = this.transform(this.FlowConfig);
    },
    clickNode(node) {
      this.node = node
      // console.log('当前点击节点', node)
    },
  },
}
</script>

<style lang="less" scoped>
#drawProcessDesign {
  background: #f0f2f5;
}
